window.addEventListener('load', function () {
    // 0. 循环精灵图
    var lis = document.querySelectorAll('.life_service li');
    for (var i = 0; i < lis.length; i++) {
        // 让索引号 乘以 44 就是每个li的背景y坐标
        var y = i * 44;
        lis[i].children[0].style.backgroundPosition = '0 -' + y + 'px';
    }

    // 1. 点击close图标 关闭顶部广告栏
    var activity_top = document.querySelector('.activity-top');
    function close_act() {
        activity_top.style.display = 'none';
    }
    var myclose = document.querySelector('.close');
    myclose.addEventListener('click', close_act)

    // 2. 品优购秒杀倒计时
    var cutdown = document.querySelectorAll('.timmer__unit');
    var inputTime = +new Date() + 3600000; // 返回的是用户输入事件总的毫秒数
    function countDown() {
        var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
        var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
        var h = parseInt(times / 60 / 60 % 24); //时
        h = h < 10 ? '0' + h : h;
        cutdown[0].innerHTML = h;
        var m = parseInt(times / 60 % 60); //分
        m = m < 10 ? '0' + m : m;
        cutdown[1].innerHTML = m;
        var s = parseInt(times % 60); //秒
        s = s < 10 ? '0' + s : s;
        cutdown[2].innerHTML = s;
    }
    countDown(); //先调用一次函数，防止第一次刷新页面空白
    setInterval(countDown, 1000);

    // 3. focus轮播图
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    // 1) 鼠标经过/离开 显示/隐藏 左右按钮
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        timer = null; //清除定时器变量
    })
    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function () {
            // 手动调用点击事件
            arrow_r.click();
        }, 3000);

    })
    // 2) 动态生成小圆圈
    var focus_ul = focus.querySelector('ul');
    var focus_circle = focus.querySelector('.circle');
    var circle = 0; // 控制小圆圈的播放
    var focus_num = 0; // 当前图片的索引
    var flag = true;
    for (var i = 0; i < focus_ul.children.length; i++) {
        var li = document.createElement('li');
        // 给li添加index
        li.setAttribute('index', i);
        focus_circle.appendChild(li);
        // 排他思想 绑定 点击小圆圈事件
        li.addEventListener('click', function () {
            for (var i = 0; i < focus_circle.children.length; i++) {
                focus_circle.children[i].className = '';
            }
            this.className = 'current';
            // 点击小圆圈 移动focus_ul 实现图片切换
            focus_num = this.getAttribute('index');
            circle = focus_num;
            animate(focus_ul, -focus_num * focusWidth);
        })
    }
    // 给第一个小圆圈设置 current 样式
    focus_circle.children[0].className = 'current';
    // 克隆第一张图片(li) 放在 ul最后面
    var focus_first_img = focus_ul.children[0].cloneNode(true);
    focus_ul.appendChild(focus_first_img);
    // 3) 鼠标点击右侧按钮 图片滚动
    arrow_r.addEventListener('click', function () {
        if (flag) {
            flag = false; //关闭节流阀
            // 当走到最后一张图（第一张的复制图）, 通过 ul 的 left = 0 实现回到第一张图
            if (focus_num == focus_ul.children.length - 1) {
                focus_ul.style.left = 0;
                focus_num = 0;
            }
            focus_num++;
            animate(focus_ul, -focus_num * focusWidth, function () {
                flag = true; //打开节流阀
            });
            // 4） 点击右侧按钮 小圆圈跟随变化
            circle++;
            circle = circle == focus_circle.children.length ? 0 : circle;
            circleChange();
        }
    })
    // 4) 鼠标点击左侧按钮 图片滚动
    arrow_l.addEventListener('click', function () {
        if (flag) {
            flag = false;
            // 当走到第一张图, 通过 ul 的 left = -(focus_ul.children.length - 1) 实现回到最后一张图
            if (focus_num == 0) {
                focus_num = focus_ul.children.length - 1;
                focus_ul.style.left = -focus_num * focusWidth + 'px';
            }
            focus_num--;
            animate(focus_ul, -focus_num * focusWidth, function () {
                flag = true;
            });
            // 5） 点击左侧按钮 小圆圈跟随变化
            circle--;
            circle = circle < 0 ? focus_circle.children.length - 1 : circle;
            circleChange();
        }
    })
    function circleChange() {
        for (var i = 0; i < focus_circle.children.length; i++) {
            focus_circle.children[i].className = '';
        }
        focus_circle.children[circle].className = 'current';
    }
    // 6) 自动播放轮播图
    var timer = setInterval(function () {
        // 手动调用点击事件
        arrow_r.click();
    }, 3000);


    // 4.品优秒杀 点击轮播图
    var slider_l = document.querySelector('.slider_control_prev');
    var slider_r = document.querySelector('.slider_control_next');
    var slider = document.querySelector('.slider');
    var slider_ul = slider.querySelector('ul');
    var sliderWidth = slider.offsetWidth;
    var slider_num = 0; // 当前li的索引
    // 克隆第一组图片(li) 放在 ul最后面
    for (var i = 0; i < 3; i++) {
        var slider_first_img = slider_ul.children[i].cloneNode(true);
        slider_ul.appendChild(slider_first_img);
    }
    // 鼠标点击左右侧按钮 图片滚动
    slider_r.addEventListener('click', function () {
        if (flag) {
            flag = false; //关闭节流阀
            // 当走到最后一张图（第一张的复制图）, 通过 ul 的 left = 0 实现回到第一张图
            if (slider_num == slider_ul.children.length / 3 - 1) {
                slider_ul.style.left = 0;
                slider_num = 0;
            }
            slider_num++;
            animate(slider_ul, -slider_num * sliderWidth, function () {
                flag = true; //打开节流阀
            });
        }
    })
    slider_l.addEventListener('click', function () {
        if (flag) {
            flag = false;
            console.log(slider_num);
            // 当走到第一张图, 通过 ul 的 left = -(focus_ul.children.length - 1) 实现回到最后一张图
            if (slider_num == 0) {
                slider_num = slider_ul.children.length / 3 - 1;
                slider_ul.style.left = -slider_num * sliderWidth + 'px';
            }
            slider_num--;
            animate(slider_ul, -slider_num * sliderWidth, function () {
                flag = true;
            });
        }
    })

    // 5.品优秒杀 自动轮播图
    var seckill_brand = document.querySelector('.seckill-brand');
    var seckill_brandWidth = seckill_brand.offsetWidth;
    // 2) 动态生成小圆圈
    var seckill_brand_ul = seckill_brand.querySelector('ul');
    var seckill_brand_circle = seckill_brand.querySelector('.slider_indicators');
    var brand_circle = 0; // 控制小圆圈的播放
    var seckill_brand_num = 0; // 当前图片的索引

    for (var i = 0; i < seckill_brand_ul.children.length; i++) {
        var li = document.createElement('li');
        // 给li添加index
        li.setAttribute('index', i);
        seckill_brand_circle.appendChild(li);
        // 排他思想 绑定 鼠标移动小圆圈事件
        li.addEventListener('mouseover', function () {
            for (var i = 0; i < seckill_brand_circle.children.length; i++) {
                seckill_brand_circle.children[i].className = '';
            }
            this.className = 'current';
            // 点击小圆圈 移动focus_ul 实现图片切换
            seckill_brand_num = this.getAttribute('index');
            brand_circle = seckill_brand_num;
            animate(seckill_brand_ul, -seckill_brand_num * seckill_brandWidth);
        })
    }
    // 给第一个小圆圈设置 current 样式
    seckill_brand_circle.children[0].className = 'current';
    // 克隆第一张图片(li) 放在 ul最后面
    var seckill_brand_first = seckill_brand_ul.children[0].cloneNode(true);
    seckill_brand_ul.appendChild(seckill_brand_first);
    // 自动播放轮播图
    var brand_timer = setInterval(function () {
        // 当走到最后一张图（第一张的复制图）, 通过 ul 的 left = 0 实现回到第一张图
        if (seckill_brand_num == seckill_brand_ul.children.length - 1) {
            seckill_brand_ul.style.left = 0;
            seckill_brand_num = 0;
        }
        seckill_brand_num++;
        animate(seckill_brand_ul, -seckill_brand_num * seckill_brandWidth);
        brand_circle++;
        brand_circle = brand_circle == seckill_brand_circle.children.length ? 0 : brand_circle;
        for (var i = 0; i < seckill_brand_circle.children.length; i++) {
            seckill_brand_circle.children[i].className = '';
        }
        seckill_brand_circle.children[brand_circle].className = 'current';
    }, 3000);
})